<template>
    <div class="retrieve">
        <div class="main">
            <!-- 面包屑 -->
            <el-breadcrumb separator=">" >
                <el-breadcrumb-item :to="{ path: '/login' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>找回密码</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="progress">
                <!-- 步骤器 -->
                <el-steps :active="active" finish-status="success" space="188px" align-center >
                    <el-step/>
                    <el-step/>
                    <el-step/>
                </el-steps>
                <!-- 第一步输入表单 -->
                <el-form
                    ref="ruleFormRef"
                    :model="resetMsg"
                    status-icon
                    :rules="rules"
                    label-width="auto"
                    label-position="left"
                    class="demo-ruleForm"
                    v-if="active==0"
                >
                    <!-- 输入手机号 -->
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="resetMsg.mobile"   placeholder="请输入您的手机号"/>
                    </el-form-item>

                    <!-- 输入验证码 -->
                    <el-form-item label="验证码" prop="code">
                        <el-input v-model="resetMsg.code"   placeholder="请输入验证码"  class="Verification"> 
                        </el-input>
                    </el-form-item>
                    <!-- 发送验证码 -->
                    <el-button type="primary"  color="#ff638a" class="getVerification"  v-if="butnShow" @click="sendVeriCode">获取验证码</el-button>
                    <el-button type="primary"  color="#ff638a" class="getVerification"  v-if="!butnShow" disabled>{{count}}</el-button>

                    <el-button  @click="firstStep"  color="#FF8094">下一步</el-button>
                </el-form>
                <!-- 第二步输入表单 -->
                <el-form
                    ref="resetFormRef"
                    :model="resetMsg"
                    status-icon
                    :rules="rules"
                    label-width="auto"
                    label-position="left"
                    class="demo-ruleForm"
                    v-if="active==1"
                >
                    <!-- 输入密码 -->
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="resetMsg.password"  type="password"  placeholder="请输入您的新密码"/>
                    </el-form-item>
                    <!-- 确认密码 -->
                    <el-form-item label="确认密码" prop="checkpassword">
                        <el-input v-model="resetMsg.checkpassword" type="password" placeholder="请再次输入您的密码"/>
                    </el-form-item>

                    <!-- 登录按钮 -->
                    <el-form-item>
                        <el-button type="primary" @click="resetPassword"  color="#FF8094" >重置密码</el-button>
                    </el-form-item>
                </el-form>
                <!-- 第三步完成表单 -->
                <div class="finish"  v-if="active==2">
                    <el-col :sm="12" :lg="12">
                        <el-result icon="success"  title="重置密码成功">
                            <template #extra>
                                <el-button  @click="next"  color="#FF8094">确定</el-button>
                            </template>
                        </el-result>
                    </el-col>
                </div>
                <!-- 返回登录 -->
                <router-link to="/login">
                    <el-button  color="#FF8094"  @click="next" v-if="active==3" class="toLogin">
                        返回首页
                    </el-button>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script setup>
// 引入composition api
import { ref,reactive } from 'vue'

 import  useLoginStore  from '@/store/login'
 import { ElNotification } from 'element-plus'
 import { setResetVer,setResetPass } from '@/api'
 import { useRouter } from 'vue-router'
 const LoginStore = useLoginStore()
 const router = useRouter()
// 记录是哪个步骤条
const active = ref(0)
   //获取到表单组件
let ruleFormRef = ref()
let resetFormRef = ref()
//定义手机号码、密码、验证码等数据
let resetMsg = reactive({
      id:null,
      code : null,
      mobile : null,
      password : null,
      checkpassword: null,
});
// let checkpassword = ref(null);
let result = ref(null);
//定义show判断发送验证码按钮是否倒计时
const butnShow = ref(true)
//定义倒计时
let count = ref(60)
//用于存计时器返回值
let timer = null


// 发送验证码函数
const sendVeriCode = async()=> {
    //如何输入了手机号则发送验证码请求并做倒计时
        result = await setResetVer({
            mobile:resetMsg.mobile,
        })
        resetMsg.id = result.user.id;
        if(result.code == 200){
            // 模拟手机接收到短信
            setTimeout(()=>{
                ElNotification({
                type: 'info',
                message: `您的验证码是${result.user.code}`,
                duration: 5000,
              })
            },4000)
            //调整按钮样式，倒计时
            const TIME_COUNT = 60;
            if(!timer){
              count.value = TIME_COUNT;
              butnShow.value = false;
              timer = setInterval(()=>{
                if(count.value>0 && count.value <= TIME_COUNT){
                  count.value -- ;
                }else{
                  butnShow.value = true;
                  clearInterval(timer);
                  timer = null
                }
              },1000)
            }
        }
}

// 第一步完成函数
const firstStep = () => {
    if(resetMsg.code !== result.user.code){
        ElNotification({
            type: 'error',
            message: `验证码错误`,
            duration: 5000,
        })
    }else if(resetMsg.mobile !== result.user.mobile){
        ElNotification({
            type: 'error',
            message: `手机号错误`,
            duration: 5000,
        })
    }else{
        active.value++
    }
}
// 第二部重置密码函数
const resetPassword = async() =>{
    if(resetMsg.checkpassword!== resetMsg.password){
        ElNotification({
            type: 'error',
            message: `重置密码失败,两次密码不一致`,
            duration: 5000,
        })
    }else{
        const res = await setResetPass(resetMsg)
        if(res.code == 200) active.value++
    }

}

    // 校验手机号
    const validatePhone = (rule, value, callback) => {
        if (!value) {
            callback(new Error('手机号不能为空'))
        } else if(!LoginStore.reg_phone.test(value)) {
            callback(new Error('请输入正确的手机号'))
        }else {
            callback()
        }
    }
    //校验验证码
    const validateVerification = (rule, value, callback) => {
        console.log(value)
        if (!value) {
            callback(new Error('验证码不能为空'))
        } else if(!LoginStore.reg_veriCode.test(value)) {
            callback(new Error('请输入四位数字'))
        }else{
            callback()
        }
    }
    //校验密码
    const validatePass = (rule, value, callback) => {
        if (!value) {
            callback(new Error('密码不能为空'))
        }else if(!LoginStore.reg_password.test(value)){
            callback(new Error('请重新输入6~16位数字加字母的密码'))
        }else {
            if (resetMsg.checkpassword !== '') {
                if (!resetFormRef.value) return
                resetFormRef.value.validateField('checkpassword', () => null)
                }
                callback()
        }
    }
    // 验证两次密码是否输入正确
    // const validateCheckPass = (rule, value, callback) => {
    //     if (!resetMsg.checkpassword) {
    //         callback(new Error('请再次输入密码'))
    //     } else if (resetMsg.checkpassword!== resetMsg.password) {
    //         callback(new Error("两次密码不一样"))
    //     } else {
    //         callback()
    //     }
    // }
    const validateCheckPass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'))
        } else if (value !== resetMsg.password) {
            callback(new Error("两次密码不一样"))
        } else {
            callback()
        }
    }
     //定义校验规则
     const rules = reactive({
        code: [{ validator: validateVerification, trigger: 'blur' }],
        mobile: [{ validator: validatePhone, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        checkpassword: [{ validator: validateCheckPass, trigger: 'blur' }],
    })
    
    //点击下一步按钮
    const next = () => {
    if (active.value++ > 3) active.value = 0
    }


</script>

<style scoped>
.retrieve{
    background-color: #f8f8f8;
    height: 600px;
    padding-top: 20px;
}
.progress{
    width: 576px;
    height: 64px;
    margin: 60px auto;
}
/* 步骤器中的每一步样式 */
:deep(.el-step__icon) {
    width: 60px;
    height: 60px;
    /* background-color: #ff638a; */
    background-color: #dfdfdf;
    border: none;
    color: #fff;
}
:deep(.el-step.is-horizontal .el-step__line){
    height: 10px;
    top: 26px;
}
/* 调整步骤器成功时的样式 */
:deep(.is-success .el-step__icon){
    background-color: #ff638a;
}
:deep(.is-success .el-step__line){
    background-color: #ff638a;
}
:deep(.el-step__head.is-success) {
    color: #ff638a;
    border-color:#ff638a;
}

.demo-ruleForm{
    width: 400px;
    margin: 60px auto;
    position: relative;
}
/* 输入框样式 */
:deep(.el-input__wrapper){
    height: 50px;
}
:deep(.el-form-item__label){
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #333;
}
/* 按钮样式 */
:deep(.el-button){
    width: 400px;
    height: 60px;
    color: #fff;
    font-size: 22px;
    margin-top: 40px;
    margin-left: 0px;
}

.Verification {
    width: 135px;
}
.getVerification{
 width: 170px;
 height: 52px; 
 font-size: 16px;
 position: absolute;
 top: 30px;
 right: 0px;
}
.finish{
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.toLogin{
    margin-top: 150px;
    margin-left: 80px;
}
</style>